<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>音乐</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 300vh;
        }
        #music{
            width: 50px;
            height: 50px;
            position: fixed;
            right: 20px;
            bottom: 20px;
        }
        audio {
            width: 50px;
            height: 50px;
            display: none;
        }
        #bf {
            width: 50px;
            height: 50px;
            position: relative;
        }
        .music-bg {
            width: 50px;
            height: 50px;
            border-radius: 100%;
            background-image: url("./images/d.jpg");
            background-size: cover;
            animation: music-play 7s linear infinite;
        }
        .music-play{
            animation-play-state:paused;
        }
        .play,.stop {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .play::after {
            content: '';
            height: 0;
            width: 0;
            display: block;
            border: 11px transparent solid;
            border-right-width: 0;
            border-left-color: #333;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .stop:after, .stop:before{
            content: '';
            height: 20px;
            width: 4px;
            display: block;
            background: #333;
            position: absolute;
            top: 50%;
            left: 18px;
            transform: translateY(-50%);
        }
        .stop:after {
            left: 28px;
        }
        @keyframes music-play {
            0% {
                transform: rotate(0);
            }
            100% {
                transform: rotate(360deg);
            }
        }

    </style>
</head>
<body>asdasd
    <div id="music">
        <audio src="./music/goTime.mp3" autoplay loop id="music1" preload="auto"></audio>
        <div id="bf" onclick="bf();">
            <div class="music-bg"></div>
            <span class="play"></span>
            <span class="stop"></span>
        </div>
    </div>
    <script>
        var audio = document.getElementById('music1');
        function musicPlay() {
            var play = document.querySelector(".play")
            var stop = document.querySelector(".stop")
            var musicBg = document.querySelector(".music-bg")
            if (audio.paused) {
                audio.play();//audio.play();// 这个就是播放
                play.style.display = "none"
                stop.style.display = "block"
                musicBg.classList.remove("music-play")
            } else {
                audio.pause();// 这个就是暂停
                stop.style.display = "none";
                play.style.display = "block";
                musicBg.classList.add("music-play");
            }
        }

        function bf() {
            if (audio !== null) {
                //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
                musicPlay();
            }
        }
        window.addEventListener("load", function () {
            musicPlay();
        });
            //--创建页面监听，等待微信端页面加载完毕 触发音频播放
        document.addEventListener('DOMContentLoaded', function () {
            function audioAutoPlay() {
                audio.play();
                document.addEventListener("WeixinJSBridgeReady", function () {
                    audio.stop()
                }, false);
                musicPlay();
            }

            audioAutoPlay();
        });



    </script>
</body>
</html>